<template>
    <div ref="wrapContentRef" :class="contentClass">
        <a-tabs v-if="hasTab" v-model:active-key="active" class="wrap-tabs" hide-add type="editable-card" size="small" @tab-click="handleTabClick" @edit="handleEdit">
            <a-tab-pane v-for="tab in tabsStore.getTabs" :key="tab.url" :tab="tab.name" :closable="tab.closable" />
        </a-tabs>
        <div class="content">
            <router-view v-slot="{ Component }">
                <keep-alive :include="cacheMenu">
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, computed, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useTabsStore, useFormatStore, usePermissionStore } from '@iframe/tools/store'

const router = useRouter()
const route = useRoute()
const tabsStore = useTabsStore()
const formatStore = useFormatStore()
const permissionStore = usePermissionStore()
const { getMenu } = storeToRefs(permissionStore)

const active = ref()
const wrapContentRef = ref()

console.log(route)
const hasTab = computed(() => {
    return formatStore.getTab === 0
})

const cacheMenu = computed(() => {
    return toRaw(getMenu.value)
        .filter(item => item.type === 2 && item.keepAlive === 0 && item.moduleName)
        .map(item => item.moduleName)
})

const contentClass = computed(() => {
    return `wrap-content ${formatStore.getTab === 0 ? 'has-tab' : 'no-tab'}`
})

onMounted(() => {
    active.value = route.path
    addTab()
})

const handleTabClick = activeKey => {
    const tab = tabsStore.getTabs.find(item => item.url === activeKey)
    router.push(tab.fullUrl)
}
const handleEdit = targetKey => {
    if (route.url === targetKey) {
        const index = tabsStore.getTabs.findIndex(item => item.fullUrl === targetKey)
        const url = tabsStore.getTabs[index - 1].fullUrl
        router.push(url)
    }
    tabsStore.removeTabs(targetKey)
}
const addTab = () => {
    const url = route.path
    const fullPath = route.fullPath
    const menu = toRaw(getMenu.value).find(item => item.url === url)
    if (menu) {
        tabsStore.addTabs({
            url: menu.url,
            fullUrl: fullPath,
            name: menu.name,
            closable: true
        })
    }
}

watch(getMenu, () => {
    addTab()
})
watch(
    () => route.path,
    routePath => {
        addTab()
        active.value = routePath
    }
)
</script>
<style lang="less" scoped>
.wrap-content {
    height: 100%;
    .wrap-tabs {
        margin: 10px 10px 0 10px;
        box-sizing: border-box;
        :deep(.ant-tabs-tab-with-remove) {
            margin-left: 6px !important;
        }
        :deep(.ant-tabs-nav) {
            margin-bottom: 2px;
        }
        :deep(.ant-tabs-nav::before) {
            border-bottom: none;
        }
        :deep(.ant-tabs-tab) {
            height: 30px;
            padding-right: 10px !important;
            border-radius: 6px !important;
            border-color: transparent !important;
            box-sizing: border-box;
            background-color: #fff !important;
            position: relative;
        }
        :deep(.ant-tabs-ink-bar) {
            display: none !important;
        }
        :deep(.ant-tabs-content-holder) {
            display: none;
        }
        :deep(.ant-tabs-top .ant-tabs-nav::before) {
            display: none;
        }
        :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
            color: #4764e6;
        }
        :deep(.anticon) {
            font-size: 10px;
        }
    }
    .content {
        display: block;
        overflow-y: auto;
    }
}
.has-tab .content {
    height: calc(100% - 42px);
}
.no-tab .content {
    height: 100%;
}
</style>
